<template>
	<div>
		<ul>
			<li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
		</ul>
		<button @click="update">更新</button>
		<button @click="add">添加</button>
		<p @click="num++">{{ num }}</p>

		<ul>
			<li v-for="person in persons" :key="person.id">
				{{ person.name }} - {{ person.age }}
			</li>
		</ul>
		<button @click="updatePersons">更新</button>
	</div>
</template>

<script>
export default {
	name: "App",
	data() {
		this.num = 1;

		return {
			person: {
				name: "haijing",
				age: 58,
				// sex: '男'
			},
			persons: [{ id: 1, name: "haijing", age: 58 }],
		};
	},
	methods: {
		update() {
			/*
        响应式数据：更新数据时，数据会变化，用户页面也会变化

        Vue中到底什么数据是响应式的？
          data函数返回值对象中数据的原有属性都是响应式数据
          新添加属性不是响应式的 
            --> 对象用 this.$set()
            --> 数组用 变更方法 push pop...
      */
			this.person.age++;
		},
		add() {
			// this.person.sex = "男";
			// 添加响应式数据
			this.$set(this.person, "sex", "男");
		},
		updatePersons() {
			// this.persons[0].age++;
			// this.persons[1] = { id: 2, name: "laoluo", age: 33 };
			// https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
			this.persons.push({ id: 2, name: "laoluo", age: 33 });
		},
	},
};
</script>

<style></style>
